/**
 * @file filter
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  PureComponent,
  PropTypes
} from 'react';
import {Renderer, render, filterObj, renderChildren} from '../../renderer';
import * as cx from 'classnames';
import * as assign from 'object-assign';
import Html from '../../../widgets/html';
import {resolveVariable} from '../../util';
import OnExpression from '../../hoc/on-expression';
import {padArr} from '../../util';

@Renderer({
  name: 'grid-card',
  desc: '...',
  test: /(?:^|\/)card$/
})
@OnExpression
export default class GridCard extends PureComponent {
  static propTypes = {
    className: PropTypes.string,
    header: PropTypes.shape({
      title: PropTypes.string,
      subTitle: PropTypes.string,
      desc: PropTypes.string,
      avatar: PropTypes.string,
      highlight: PropTypes.any
    }),
    actions: PropTypes.arrayOf(PropTypes.shape({
      actionType: PropTypes.oneOf(['ajax', 'dialog', 'url', 'link']).isRequired
    })),
    onRequestAction: PropTypes.func.isRequired
  };

  static defaultProps = {
    className: 'b-a',
    bodyDisplay: 'h',
    actionsCount: 4
  };

  renderBody() {
    const {
      item, 
      bodyClassName, 
      loading, 
      onRequestAction,
      onRequestHighlight,
      data, 
      $path, 
      locals, 
      onNotify
    } = this.props;
    let body = this.props.body;
    if (!body) return null;

    const dragging = this.props.stateDragging;

    if (typeof body === 'string') {
      return renderChildren(this.props.$path, body, {
        data,
        className: typeof bodyClassName === 'undefined' ?  'padder m-t-sm m-b-sm' : bodyClassName
      });
    }

    if(!Array.isArray(body)) {
      body = [body];
    }
    let element = body.map((field, key) => {

      if(Array.isArray(field)) {
        return (
          <div key={key} className="hbox">
            {
              field.map((field, key)=> {
                return (
                  <div className="col" key={key}>
                    {
                      render(`${$path}/field`, assign({
                        type: 'text'
                      }, field), {
                        key,
                        item: item,
                        data: assign({
                        }, data, item),
                        onCheck: this.props.toggle,
                        onRequestAction: onRequestAction,
                        onRequestHighlight: onRequestHighlight,
                        onFieldValueChange: this.props.onFieldValueChange,
                        onFieldValueSave: this.props.onFieldValueSave,
                        value: resolveVariable(field.name, item),
                        disabled: loading,
                        disableQuickEdit: dragging || loading,
                        locals,
                        onNotify,
                        sendNotify: onNotify
                      })
                    }
                  </div>
                )}
              )
            }
          </div>
        )
      }
      return render(`${$path}/field`, assign({
        type: 'text'
      }, field), {
        key,
        item: item,
        data: assign({}, data, item),
        onCheck: this.props.toggle,
        onRequestAction: onRequestAction,
        onRequestHighlight: onRequestHighlight,
        onFieldValueChange: this.props.onFieldValueChange,
        onFieldValueSave: this.props.onFieldValueSave,
        value: resolveVariable(field.name, item),
        disabled: loading,
        disableQuickEdit: dragging || loading,
        locals,
        onNotify,
        sendNotify: onNotify
      })
    });

    return (
      <div className={cx('panel-body',bodyClassName)}>
        {element}
      </div>
    )
  }

  renderActions() {
    const {actions, onRequestAction, item, data, locals, $path, actionsCount} = this.props;
    if (!actions) return null;

    if (actionsCount && actions.length) {
      return padArr(actions, actionsCount).map((actions, key) => (
        <div
          key={key}
          className={cx('card-actions hbox text-center text-sm', {
            "b-t b-light": true
          })}
        >
          {actions.map((action, key) => render(`${$path}/card-action`, action, {
            key,
            item,
            data,
            locals,
            detectPropName: 'data',
            onRequestAction
          }))}
        </div>
      ))
    }

    return (
      <div
        className={cx('card-actions hbox text-center text-sm', {
          "b-t b-light": true
        })}
      >
        {actions.map((action, key) => render(`${$path}/card-action`, action, {
          key,
          item,
          data,
          locals,
          detectPropName: 'data',
          onRequestAction
        }))}
      </div>
    )
  }

  render() {
    let {
      className,
      data,
      header,
      bulkActions,
      item,
      onCheck,
      disabled,
      locals,
      $path
    } = this.props;

    header = header ? filterObj(header, data) : null;

    return (
      <div className={cx("panel", className)}>
        {header ? (
            <div className={cx('panel-heading', header.className)}>
              <div className="clearfix">
                {
                  bulkActions && bulkActions.length ? (
                      <div className="pull-right m-l-xs m-r-n-xs">
                        {
                          render(`${$path}/field/checkbox`, {}, {
                            item,
                            onCheck,
                            disabled,
                            locals
                          })
                        }
                      </div>
                    ) : null
                }

                {header.avatar ? (
                    <span className={header.avatarClassName || 'pull-left thumb avatar b-3x m-r'}>
                <img className="img-rounded" src={header.avatar} />
              </span>
                  ) : null}

                <div className="clear card-title">
                  {header.highlight ? (
                      <i className="fa fa-circle text-success text-xs" />
                    ) : null}

                  {header.title ? (<div className="h4 font-thin m-t-xs m-b-xs text-ellipsis">
                    <Html html={header.title} />
                  </div>) : null}

                  {header.subTitle || header.subTitlePlaceholder ? (
                      <div className="text-ellipsis">{header.subTitle || header.subTitlePlaceholder && (<span className="text-muted">{header.subTitlePlaceholder}</span>)}</div>
                    ) : null}
                  {header.desc || header.descPlaceholder
                    ? header.desc && (<Html className="text-ellipsis" html={header.desc} />) || header.descPlaceholder && (<div className="text-ellipsis"><span className="text-muted">{header.descPlaceholder}</span></div>)
                    : null}
                </div>

              </div>
            </div>
          ) : null}
        {this.renderBody()}
        {this.renderActions()}
      </div>
    );
  }
}
